<!DOCTYPE html>
<html>
<head>
    <title>Web UI Lab 1 - Enhanced</title>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            background: #000;
            transition: background 2s ease-in-out;
        }

        .scene {
            position: relative;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, #f39c12, #f1c40f, #f1c40f, #3498db, #2980b9);
            animation: day-to-night 20s infinite linear;
        }

        @keyframes day-to-night {
            0% { background-position-y: 0; }
            50% { background-position-y: 100%; }
            100% { background-position-y: 0; }
        }

        .sun-moon {
            position: absolute;
            top: 10%;
            left: 50%;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            transform: translateX(-50%);
            animation: sun-moon-path 20s infinite linear;
        }

        .sun {
            width: 100%;
            height: 100%;
            background: #f1c40f;
            border-radius: 50%;
            box-shadow: 0 0 50px #f1c40f;
            opacity: 1;
            transition: opacity 2s;
        }

        .moon {
            width: 100%;
            height: 100%;
            background: #ecf0f1;
            border-radius: 50%;
            box-shadow: 0 0 30px #ecf0f1, inset -15px -15px 0px 0px rgba(0,0,0,0.1);
            opacity: 0;
            transition: opacity 2s;
        }

        @keyframes sun-moon-path {
            0% { transform: translate(-50%, 0) rotate(0deg); top: 10%; }
            25% { transform: translate(-50%, 0) rotate(90deg); top: 50%; }
            50% { transform: translate(-50%, 0) rotate(180deg); top: 90%; opacity: 0; }
            51% { opacity: 1; }
            75% { transform: translate(-50%, 0) rotate(270deg); top: 50%; }
            100% { transform: translate(-50%, 0) rotate(360deg); top: 10%; }
        }

        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            opacity: 0;
            animation: show-stars 20s infinite linear;
        }

        .star {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            animation: twinkle 1.5s infinite alternate;
        }

        @keyframes show-stars {
            0%, 100% { opacity: 0; }
            50%, 75% { opacity: 1; }
        }

        @keyframes twinkle {
            to { opacity: 0.5; transform: scale(0.8); }
        }

        .mountains {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 300px;
        }

        .mountain {
            position: absolute;
            bottom: 0;
            background: #2c3e50;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
        }

        .mountain-1 {
            left: -10%;
            width: 50%;
            height: 250px;
            background: #34495e;
        }

        .mountain-2 {
            left: 20%;
            width: 60%;
            height: 300px;
        }

        .mountain-3 {
            right: -5%;
            width: 40%;
            height: 200px;
            background: #34495e;
        }

        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 10;
        }

        h1 {
            color: white;
            font-size: 4em;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
            animation: text-glow 20s infinite linear;
        }

        @keyframes text-glow {
            0%, 100% { color: #fff; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); }
            50% { color: #f1c40f; text-shadow: 0 0 20px #f1c40f; }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="scene">
        <div class="sun-moon">
            <div class="sun"></div>
            <div class="moon"></div>
        </div>
        <div class="stars"></div>
        <div class="mountains">
            <div class="mountain mountain-1"></div>
            <div class="mountain mountain-2"></div>
            <div class="mountain mountain-3"></div>
        </div>
        <div class="container">
            <h1>Hello World</h1>
        </div>
    </div>

    <script>
        const starsContainer = document.querySelector('.stars');
        for (let i = 0; i < 100; i++) {
            const star = document.createElement('div');
            star.className = 'star';
            star.style.top = Math.random() * 100 + '%';
            star.style.left = Math.random() * 100 + '%';
            const size = Math.random() * 2 + 1;
            star.style.width = size + 'px';
            star.style.height = size + 'px';
            star.style.animationDelay = Math.random() * 1.5 + 's';
            starsContainer.appendChild(star);
        }

        const sunMoon = document.querySelector('.sun-moon');
        const sun = document.querySelector('.sun');
        const moon = document.querySelector('.moon');

        setInterval(() => {
            const angle = (new Date().getTime() / (20000 / 360)) % 360;
            if (angle > 90 && angle < 270) {
                sun.style.opacity = '0';
                moon.style.opacity = '1';
                document.body.style.background = '#000';
            } else {
                sun.style.opacity = '1';
                moon.style.opacity = '0';
                document.body.style.background = 'transparent';
            }
        }, 100);
    </script>
</body>
</html>